<template>
	<view v-if="loading || error" class="loading_view">
		<u-loading mode="circle" v-if="loading" size="50"></u-loading>
		<u-toast ref="uToast" />
		<view v-if="error"><image class="icon" src="../../static/image/empty-image-error.png"></image> </view>
		<view class="messgae">{{ loading?'加载中...':'加载失败' }}</view>
	</view>
	<view v-else>
		<view class="images">
			<u-upload 
			:action="action" 
				:show-progress='false' 
				max-count="5" 
				@on-success="onSuccess" 
				@on-remove="onRemove" :file-list="fileList" ></u-upload>
			<u-toast ref="uToast" />
		</view>
		
		<view class="btn" @click="submit()">
			{{ sub_status?'保存中...':'保存相册' }}
		</view>
	</view>
</template>

<script>
	import config from '../../static/js/config.js'
	
	export default {
		data() {
			return{
				action: config.url,
				fileList:[
				],//回显图片
				dataList:[],
				loading:false,
				error:false,
				sub_status: false,
				disabled:false
			}
		},methods:{
			onSuccess(data, index, lists) {
				
				// console.log(lists)
				// lists.splice(index,1)
				// data=JSON.parse(data);
				if(data.code==1){
					this.dataList.push(data.src);
					this.$refs.uToast.show({
						title: '上传成功',
						type: 'success'
					})
				}else{
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					})
				}
			},
			onRemove(index, lists){
				this.dataList.splice(index,1);
			},
			getData(){
				
				let that = this
				
				if(this.loading){
					return false
				}
				
				this.loading = true
				
				this.error = false
				
				this.$request({
					url:'/user/images',
					data:{},
					method:'post',
					success(res){
						if(res.statusCode==200){
							if(res.data.code==1){
								if(res.data.data){
									
									let fileList = []
									
									for(var i in res.data.data){
										fileList.push({url:res.data.data[i]})
									}
									
									that.fileList = fileList
									
									that.dataList = JSON.parse(JSON.stringify(res.data.data))
								}
							}else{
								that.$refs.uToast.show({
									title: res.data.msg,
									type: 'error'
								})
							}
						}else{
							that.error = true
							
							that.$refs.uToast.show({
								title: '网络繁忙~',
								type: 'error'
							})
						}
					},
					fail(err){
						that.error = true
						
						that.$refs.uToast.show({
							title: '加载失败',
							type: 'error'
						})
					},
					complete(){
						that.loading = false
					}
				})
			},
			submit(){
				if(this.sub_status || this.disabled){
					return false
				}
				this.sub_status = true
				
				let that = this
				
				this.$request({
					url:'/user/images_save',
					data:{images:that.dataList},
					method:'post',
					success(res){
						if(res.statusCode==200){
							if(res.data.code==1){
								
								that.$refs.uToast.show({
									title: '保存成功',
									type: 'success',
									isTab :true,
									url:'pages/user/user'
								})
								
								that.disabled = true
								
							}else{
								that.$refs.uToast.show({
									title: res.data.msg,
									type: 'error'
								})
							}
						}else{
							that.$refs.uToast.show({
								title: '网络繁忙',
								type: 'error'
							})
						}
					},
					fail(err){
						that.$refs.uToast.show({
							title: '提交失败',
							type: 'error'
						})
					},
					complete(){
						that.sub_status = false
					}
				})
			}
		},mounted() {
			this.action+='/upload'
			
			this.getData()
		}
	}
</script>

<style scoped>
	.images{
		padding:20rpx 40rpx;
		border-top:1px solid #F2F2F2;
	}
	.btn_hide{
		height: 110rpx;
	}
	.btn{
		background: #EA4389;
		color:#fff;
		width:100%;
		height:110rpx;
		line-height: 110rpx;
		font-size:32rpx;
		text-align: center;
		position: fixed;
		bottom:0;
	}
</style>
